<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 列表 -->
            <div style="padding:10px 0"><span>采购单号：</span><span>{{order_id}}</span></div>
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" label='序号' width="50">
                    <template slot-scope="scope">
                        <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="图片" prop="creat_time" width="80">
                    <template slot-scope="scope">
                        <div v-viewer="options" class="images fit">
                            <img :src="scope.row.thumb" :data-source="scope.row.img" class="image" :key="scope.row.thumb" :alt="scope.row.img.split('?image=').pop()">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="名称">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showInfo(scope.row.gift_id)">{{scope.row.name}}</el-button>
                    </template>                    
                </el-table-column>
                <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
                <el-table-column align="center" label="下单进货价(元)" prop="old_money_sell"></el-table-column>
                <el-table-column align="center" label="当前进货价(元)" prop="now_money_sell"></el-table-column>
                <el-table-column align="center" label="箱规 (个/箱)" prop="box_num"></el-table-column>
                <el-table-column align="center" label="下单数量(个)" prop="order_num"></el-table-column>
                <el-table-column align="center" label="当前数量(个)" prop="now_order_num"></el-table-column>
                <el-table-column align="center" label="下单金额(元)" prop="old_total"></el-table-column>
                <el-table-column align="center" label="当前金额(元)" prop="total"></el-table-column>
                <el-table-column align="center" label="备注" prop="remark"></el-table-column>
            </el-table>
        </div>
        <!-- 弹框 -->
        <el-dialog width="400px" title="礼品其他信息" :visible.sync="infoDialog">
            <div class="info_dialog">
                <div>名称：{{gift_info.gift_name}}</div>
                <div>礼品编号：{{gift_info.id}}</div>
                <div>神采编号：{{gift_info.no_obsolete}}</div>
                <div>国标码：{{gift_info.gb_code}}</div>
                <div>一级类别：{{gift_info.one_type}}</div>
                <div>二级类别：{{gift_info.tow_type}}</div>
                <div>三级类别：{{gift_info.three_type}}</div>
                <div>材质：{{gift_info.texture}}</div>
                <div>产品尺寸：{{gift_info.product_size}}</div>
                <div>包装尺寸：{{gift_info.packing_size}}</div>
                <div v-show="type==1">供应商：{{gift_info.supplier_name}}</div>
                <div v-show="type==1">总部对接人：{{gift_info.butt_man}}</div>
                <div>上架时间：{{gift_info.on_sale_time}}</div>
            </div>
        </el-dialog>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
            </el-pagination>
            <div class="pull-right total">
                <span>种类合计：{{allType}} 种</span>
                <span>当前数量：{{allNum}} 个</span>
                <span>当前金额 (不包含运费)：{{allTotal|keepTwoNum}} 元</span>
            </div>  
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getPage,
        getInfo,
    } from "@/api/warehouse/poDetail";
    export default {
        data() {
            return {
                listLoading:false,
                infoDialog:false,
                list:null,
                currentPage:1,
                totalDataNumber:1,
                allType:0,
                allNum:0,
                allTotal:0,
                type:"",
                order_id:"",
                id:"",
                options: {  //预览图配置
                    toolbar: true,
                    url: 'data-source'
                },
                gift_info:{}
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if(vm.$route.params.routerflag){
                    vm.type=vm.$route.params.type=="供应商"?1:2;
                    vm.order_id=vm.$route.params.order_id;
                    vm.id=vm.$route.params.id;
                    vm.allType=vm.$route.params.type_num;
                    vm.allNum=vm.$route.params.num;
                    vm.allTotal=vm.$route.params.money;
                    vm.fatchData(vm.id,vm.type)
                }
            })
        },
        methods: {
            //获取礼品信息
            showInfo(id){
                this.gift_info={};
                getInfo({id,type:this.type}).then(res=>{
                    if(res.code==1){
                        res.message.gb_code=res.message.gb_code==0?"":res.message.gb_code;
                        this.gift_info=res.message;
                        this.infoDialog=true;
                    }
                })
            },
            getData(data){
                data.forEach(val=>{
                    val.now_money_sell=(val.now_money_sell/100).toFixed(2);
                    val.old_money_sell=(val.old_money_sell/100).toFixed(2);
                    val.total=(val.now_money_sell*val.now_order_num).toFixed(2);
                    val.old_total=(val.old_money_sell*val.order_num).toFixed(2);
                });
                this.list = data;
            },
            fatchData(id,type){
                this.listLoading=true;
                this.list=[];
                getPage({id,type}).then(response=>{
                    this.totalDataNumber = response.message.page * 20;
                    getList({id,type}).then(res=>{
                        this.getData(res.message);
                        this.listLoading=false;
                    }).catch(res=>{
                        this.listLoading=false;
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            handleCurrentChange(val) {
                this.listLoading = true;
                this.list=[];
                getList({id:this.id,type:this.type}, val).then(response => {
                    this.getData(response.message);
                    this.listLoading = false;
                });
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .order_info,.rece_info{
        margin-bottom: 14px;
        .info_item{
            display: inline-block;
            width: 300px;
            margin-bottom: 10px;
        }
    }
    .order_title{
        margin-bottom: 10px;
    }
    .info_dialog{
        div+div{
            margin-top: 10px;
        }
    }
    .bottom_box{       
        .total{
            margin: 8px 20px 0px 0px;
            span{
                margin-left: 10px;
            }
        }
    }
</style>